<template>
  <div class="column-header" style="display:flex;justify-content: center;align-items:center;">
      <span class="title">{{ label }}</span>
      <el-popover placement="bottom" trigger="click" ref="tableHeadPopover" @show="funnelPopShowEvent" :popper-style="{minWidth:'88px',padding:'10px',width:'auto'}" class="popover">
          <template #reference>
              <!-- <Icon icon="svg-icon:funnel-1" :size="16" slot="reference" :color="bindData === '' ? '#acaeb3' : '#4040ff'" class="svgIcon"/> -->
              <el-icon ><Filter /></el-icon>
              <!-- <el-icon :color="bindData === '' ? '#acaeb3' : '#4040ff'" class="svgIcon"><Filter /></el-icon> -->
          </template>
          <div class="popover-content">
              <div class="popover-content-head">
                  <!-- 下拉选择 -->
                  <template v-if="type === 'select'">
                      <el-select v-model="filterValueTemp" size="small" :placeholder="'请选择' + label" :teleported="false">
                          <el-option v-for="item,index in alternativeOptions" :label="item" :value="item" :key="index"></el-option>
                      </el-select>
                  </template>
                  <!-- input输入框 -->
                  <template v-if="type === 'input'">
                      <el-input v-model="filterValueTemp" size="small" :placeholder="'请输入' + label"></el-input>
                  </template>
                  <!-- 日期选择 -->
                  <template v-if="type === 'date'">
                      <el-date-picker v-model="filterValueTemp" type="date" size="small" value-format="yyyy-MM-dd" :editable="false" placeholder="选择日期" :teleported="false" style="width:120px;"></el-date-picker>
                  </template>
                  <!-- 日期范围选择 -->
                  <template v-if="type === 'dateRange'">
                      <el-date-picker v-model="filterValueTemp" type="datetimerange" start-placeholder="Start date" end-placeholder="End date"  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" :teleported="false" style="width:200px;"></el-date-picker>
                  </template>
                  <!-- 单选框组 -->
                  <template v-if="type === 'radio'">
                      <el-radio v-model="filterValueTemp" v-for="option,i in alternativeOption" :key="i" :label="i"  >{{ option }}</el-radio>
                  </template>
              </div>
              <div class="popover-content-options" style="text-align:right;margin-top:20px;">
                  <el-button size="small" @click="tableHeadClearBtn">清空</el-button>
                  <el-button type="primary" size="small" @click="tableHeadConfirmBtn">确定</el-button>
              </div>
          </div>
      </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElPopover, ElSelect, ElInput, ElDatePicker, ElRadio, ElButton } from 'element-plus';
import { Plus, Download } from '@element-plus/icons-vue';
// import { Icon } from '@/components/Icon';

const props = defineProps({
  label:{
      type:String,  //显示列名称
      default:"label",
      require:false
  },
  value:{
      type:String,  //显示列名称
      default:"value",
      require:false
  },
  type:{
      type:String, //类型: select | date | input ...
      default:'',
      require:true
  },
  bindData:{
      type:[String,Number],  //父组件的搜索值
      default:'000',
      require:false
  },
  alternativeOption:{
      type:Array,  //当筛选为select | radio 时,其渲染的备选项数组alternativeOption
      default:() => new Array(),
      require:false
  },
  alternativeOptions:{
      type:Array,  //当筛选为select | radio 时,其渲染的备选项数组alternativeOption
      default:() => new Array(),
      require:false
  },
  filterField:{
      type:String,  //对应筛选的搜索的key,应与父组件搜索过滤bindData的key保持一致
      default:'',
      require:false
  }
});
const emit = defineEmits(['change']);


const tableHeadPopover = ref(null);
let filterValueTemp = ref("");



const funnelPopShowEvent = () => {
  console.log('popoverShow');
  filterValueTemp.value = props.bindData;
}
const tableHeadClearBtn = () => {
  filterValueTemp.value = "";
  const parameters = {
      state:"clear",
      filterField:props.filterField,
      selectedValue:filterValueTemp.value
  }
  emit("change",parameters);
  closePopover();
}
const tableHeadConfirmBtn = () => {
  const parameters = {
      state:"confirm",
      filterField:props.filterField,
      selectedValue:filterValueTemp.value
  }
  emit("change",parameters);
  closePopover();
}

function closePopover () {
  tableHeadPopover.value.hide();
}
</script>

<style>
.svgIcon{
  cursor: pointer;
  margin-left: 2px;
}
</style>